<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
		<title>example3</title>
        <script type='text/javascript' src='http://localhost:9000/public/js/lib/d3.min.js' ></script>
        <style>
			body{
				padding:0px;
				margin:0px;
			}
			.circle{
				fill:#000;
			}
        	.q0-9 { fill: rgb(197,27,125); }
			.q1-9 { fill: rgb(222,119,174); }
			.q2-9 { fill: rgb(241,182,218); }
			.q3-9 { fill: rgb(253,224,239); }
			.q4-9 { fill: rgb(247,247,247); }
			.q5-9 { fill: rgb(230,245,208); }
			.q6-9 { fill: rgb(184,225,134); }
			.q7-9 { fill: rgb(127,188,65); }
			.q8-9 { fill: rgb(77,146,33); }
			.q9-9 { file: rgb(0,0,0); }
        </style>
	</head>
	<body>
		<script type='text/javascript' >
        	
			var width = 960 ;
			var height = 500 ;
			var rand = d3.range(100).map(function(d){
				return [ width * Math.random() , height * Math.random() ] ;
			});
			var voronoi = d3.geom.voronoi()
				.clipExtent([[0,0],[width,height]]) ;
				
			var svg = d3.select('body').append('svg')
				.attr({'width':width,'height':height})
				.on('mousemove',function(){
					rand[0] = d3.mouse(this) ;
					redraw();
				});

			var path = svg.append('g').selectAll('path');

			path.data(voronoi(rand),polygon).enter().append('path').attr({
				'd' : polygon ,
				"class" : function(d,i){ 
					if( i === 0 ){
						return 'q9-9' ;
					}else{
						return "q" + (i%9) +'-9'; 
					}					
				}
			});

			svg.selectAll('circle').data(rand).enter().append('circle').attr({
				r : 2 ,
				class : 'circle' ,
				cx : function(d){
					return d[0] ;
				} ,
				cy : function(d){
					return d[1];
				}
			}) ;

			var redraw = function(){
				path = path.data(voronoi(rand),polygon);
				path.exit().remove() ;
				path.enter().append('path').attr({
					'd' : polygon ,
					"class" : function(d,i){ 
						if( i === 0 ){
							return 'q9-9' ;
						}else{
							return "q" + (i%9) +'-9'; 
						}					
					}
				});			
				path.order();
			} ;
			var polygon = function(d){
				return "M" + d.join("L") + "Z" ;
			} ;

			redraw();
       	</script>
    </body>
</html>
